<template>
  <div class="as-date-pick"
       :class="['as-date-pick--'+placement]"
       ref="asDatePick">
    <as-input v-model="label"
              :disabled="disabled"
              :placeholder="placeholder"
              ref="input"
              @blur="$emit('blur')"
              @focus="handlerFocus"
              @keydown.enter.native="enterInput"></as-input>
    <transition name="as-room-to-top">
      <as-date-pick-dropdown :active="active"
                             :type="dateType"
                             @change="changeItem"
                             v-show="showDropdown"
                             :visible="visible"
                             :now="now">
      </as-date-pick-dropdown>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
import AsDatePickDropdown from "./date-pick-dropdown";
import datePick from "./date-pick.js";

export default {
  components: { AsDatePickDropdown },
  name: "AsDatePick",
  props: {
    value: {},
    placement: {
      type: String,
      default: "bottom"
    },
    dateType: {
      type: String,
      default: "day"
    },
    placeholder: String,
    disabled: Boolean
  },
  computed: {
    label: {
      set(val) {
        this.$emit("input", val);
      },
      get() {
        switch (this.dateType) {
          case "year":
            return this.model.split("-")[0];
            break;
          case "month":
            let val = this.model.split("-");
            val.pop();
            return val.join("-");
            break;
          default:
            return this.model;
            break;
        }
        return this.model;
      }
    },
    model: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  data() {
    return {
      now: new datePick({}),
      active: new datePick({
        needGetList: false,
        year: null,
        month: null,
        day: null
      }),
      visible: new datePick({
        needGetList: true
      }),
      showDropdown: false,
      clickEvent: e => {
        if (!this.$refs.asDatePick.contains(e.target)) {
          // setTimeout(() => {
          this.showDropdown = false;
          this.validateModel();
          // }, 50);
        }
      }
    };
  },
  mounted() {
    // this.now.dateType = this.active.dateType = this.visible.dateType = this.dateType;
    window.addEventListener("click", this.clickEvent);
  },
  destroyed() {
    window.removeEventListener("click", this.clickEvent);
  },
  methods: {
    handlerFocus() {
      this.showDropdown = true;
      this.$emit("focus");
    },
    validateModel() {
      try {
        if (this.model !== "") {
          let [year, month, day] = this.model.split(["-"]);
          year = ("" + year).slice(0, 4);
          month = ("" + month).slice(0, 2);
          day = ("" + day).slice(0, 2);
          let d = new datePick({
            needGetList: false,
            year: year,
            month: isNaN(month) ? 1 : month,
            day: isNaN(day) ? 1 : day
          });
          this.active.setDate(d.year, d.month, d.day);
          this.visible.setDate(d.year, d.month, d.day);

          this.model = this.active.date;
        }
      } catch (error) {
        this.model = this.active.year = this.active.date = "";
      }
    },
    enterInput() {
      this.$refs.input.blur();
      this.validateModel();
      this.showDropdown = false;
    },
    changeItem() {
      let date = this.active.date;

      this.$emit("change", date);
      setTimeout(() => {
        this.showDropdown = false;
      }, 10);
      this.model = date;
    }
  },
  created() {}
};
</script>
